<template>
  <nav>
    <ul class="text-sm text-ink hover:text-bay-of-many flex-row gap-2 flex">
      <li>
        <a class="cursor-pointer flex flex-row items-center gap-2" href="/">Home</a>
      </li>
      <li v-for="item in props.dataList" :key="item.name">
        <a class="cursor-pointer flex flex-row items-center gap-2" :href="item.href">
          <svg class="transform-gpu -rotate-90 w-2 h-2 opacity-50" width="16px" height="16px" viewBox="0 0 16 16"
            version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <title>Icons/Chevron down</title>
            <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"
              stroke-linejoin="round">
              <g id="Icons/Chevron-down" stroke="currentColor" stroke-width="1.71428571">
                <polyline id="Path" points="14 5 8 11 2 5"></polyline>
              </g>
            </g>
          </svg>
          {{item.name}}
        </a>
      </li>
    </ul>
  </nav>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue'
const props = defineProps(['dataList'])
</script>

<style>

</style>
